<template>
    <div class="page-title">业绩查询</div>
    <div class="tag-box">
        <el-check-tag class="type-tag" :checked="searchText == '按消费业绩提成查询'"
            @change="onChange('按消费业绩提成查询')">按消费业绩提成查询</el-check-tag>
        <el-check-tag class="type-tag" :checked="searchText == '按有效桌台业绩提成查询'"
            @change="onChange('按有效桌台业绩提成查询')">按有效桌台业绩提成查询</el-check-tag>
        <el-check-tag class="type-tag" :checked="searchText == '桌台业绩明细'" @change="onChange('桌台业绩明细')">桌台业绩明细</el-check-tag>
        <el-check-tag class="type-tag" :checked="searchText == '商品业绩明细'" @change="onChange('商品业绩明细')">商品业绩明细</el-check-tag>
    </div>
    <div class="date-tag-box" v-if="searchText != '商品业绩明细'">
        <el-check-tag class="date-tag" :checked="dateText == '昨天'" @change="onChangeDate('昨天')">昨天</el-check-tag>
        <el-check-tag class="date-tag" :checked="dateText == '今天'" @change="onChangeDate('今天')">今天</el-check-tag>
        <el-check-tag class="date-tag" :checked="dateText == '本周'" @change="onChangeDate('本周')">本周</el-check-tag>
        <el-check-tag class="date-tag" :checked="dateText == '上周'" @change="onChangeDate('上周')">上周</el-check-tag>
        <!-- <el-check-tag class="date-tag" :checked="searchForm.dateText == '自定义'"
            @change="onChangeDate('自定义')">自定义</el-check-tag> -->
    </div>
    <PayKickback v-if="searchText == '按消费业绩提成查询'" :timeRange="timeRange" @handleDetails="handleDetails" />
    <TableKickback v-if="searchText == '按有效桌台业绩提成查询'" :timeRange="timeRange" @handleDetails="handleDetails" />
    <TableDetails v-if="searchText == '桌台业绩明细'" :timeRange="timeRange" :perName="perName" :perCode="perCode"
        @handleWareDetails="handleWareDetails" />
    <WaresDetails v-if="searchText == '商品业绩明细'" :consumeCode="consumeCode" />
</template>
  
<script setup>
import PayKickback from './achievement/pay_kickback.vue'
import TableKickback from './achievement/table_kickback.vue'
import TableDetails from './achievement/table_details.vue'
import WaresDetails from './achievement/wares_details.vue'

import { transformWorkTime } from '@/utils/chenhao.js'
import Api from '@/api'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime  //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime  //orgEndTime 

let searchText = ref('按消费业绩提成查询')
const onChange = (params) => {
    perName.value = ''
    perCode.value = ''
    consumeCode.value = ''
    searchText.value = params
    // nextTick(() => {
    //     dateText.value = dateText.value
    //     timeRange.value = timeRange.value
    // })
    // dateText.value = ''
    // timeRange.value = []
}
let dateText = ref('')
let timeRange = ref([])
const onChangeDate = (params) => {
    dateText.value = params
    timeRange.value = transformWorkTime(params,orgStartTime,orgEndTime) 
}

onChangeDate('今天')

// 子组件点击详情
const perName = ref('')
const perCode = ref('')
const handleDetails = (obj) => {
    onChange(obj.str)
    perName.value = obj.perName
    perCode.value = obj.perCode
}

// 子组件点击商品业绩明细
const consumeCode = ref('')
const handleWareDetails = (obj) => {
    onChange(obj.str)
    consumeCode.value = obj.consumeCode
}

</script>
  
<style scoped lang="scss">
@import '@/styles/com_style_input.css';
/* 在这里编写组件的CSS样式 */
// .app-container {}
.tag-box {
    margin-bottom: 20px;
    display: flex;


    .type-tag {
        margin-right: 20px;
        // padding: 20px 75px;
        width: 240px;
        height: 50px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #E6E6E6;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        border: 0;
    }

    ::v-deep {
        .el-check-tag {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .is-checked {
            background: #FFD400 !important;
            color: #212121 !important;
        }
    }

}

.date-tag-box {
    margin-bottom: 20px;
    display: flex;

    .date-tag {
        margin-right: 20px;
        // padding: 20px 75px;
        width: 120px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #E6E6E6;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        border: 0;
    }

    ::v-deep {
        .el-check-tag {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .is-checked {
            background: #FFE566 !important;
            color: #212121 !important;
        }
    }
}



.color-FF6A00 {
    color: #FF6A00;
}

.page-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    margin-bottom: 10px;
}

</style>
  